<template>
	<view>
		<!-- 2.0.19支持autoBack，默认为false -->
		<u-navbar title="食光社" @rightClick="rightClick" :autoBack="true" style="margin-bottom: 30px;"></u-navbar>
		<view class="seach">
			<u-search v-model="keyword" placeholder="请搜索食谱教材" @input="handleSearchInput"
				@focus="handleSearchFocus"></u-search>
		</view>
		<view v-show="this.keyword == ''">
			<view class="sxc_seach_lishi">
				<p style="font-size: 20px;color: #999;padding: 0 20px;margin-bottom:5px;"> 历史记录</p>
				<view>
					<ul class="sxc_list">
						<li v-for="item in lishiList" class="sxc_lishiList">{{item.name}}</li>
					</ul>
				</view>
			</view>
			<view class="'sxc">
				<p style="font-size: 20px;color: #999;padding: 0 20px;margin-bottom:5px;"> 热门词谱</p>
				<view>
					<view v-for="(item,index) in tageList" :key="item.id" class="sxc_remen">
						<view style="display: flex;width: 70%;padding: 0 0 0 20px;">
							<view :class="	index >= 3 ? 'sort1' : 'item'">{{ index+1 }}</view>
							<view>{{item.name}}</view>
						</view>
						<view>{{item.liulan}}浏览</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="this.keyword != ''">
			<view class="sxc_tuijian_center">
				<view class="sxc_tuijianList" v-for="item in seachList" :key="item.id">
					<img :src="item.img" alt="" style="width: 100%;border-radius: 10px;">
					<view style="padding: 10px 10px;">
						<p class="sxc_tuijianList_name">{{item.name}}</p>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="font-size: 14px;display: flex;">
								<img :src="item.userimg" alt="" style="width: 20px;height: 20px;border-radius: 50px;">
								<span>{{item.user}}</span>
							</view>
							<view>
								<u-icon name="fingerprint">{{item.liulan}}</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		recommendList
	} from '../../api/index.js'
	export default {
		data() {
			return {
				keyword: "",
				lishiList: [{
						name: "烧牛肉"
					},
					{
						name: "意大利面"
					},
					{
						name: "菌菇鲜虾"
					},
					{
						name: "千层锅"
					},
					{
						name: "挂面锅"
					},
					{
						name: "鲜虾"
					},
					{
						name: "猪肉"
					},
					{
						name: "豆腐"
					},
				],
				tageList: [{
						id: "1",
						name: "牛蒡满满暖心猪肉汤",
						liulan: "231.6万"
					},
					{
						id: "2",
						name: "简易版腌鲑鱼白汁意大利面",
						liulan: "194.3万"
					},
					{
						id: "3",
						name: "菌菇鲜虾东阴功汤",
						liulan: "172.1万"
					},
					{
						id: "4",
						name: "梅香白萝卜猪肉汤",
						liulan: "170.5万"
					},
					{
						id: "5",
						name: "豆腐菌菇鸡肉寿喜锅",
						liulan: "143.8万"
					},
					{
						id: "6",
						name: "猪肉挂面涮涮锅",
						liulan: "132.5万"
					}
				],
				seachList: [],
				homeList: []
			}
		},
		onLoad() {
			this.getrecommendList()
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			// 搜索
			handleSearchInput(value) {
				console.log(value);
				// 处理搜索框输入事件的逻辑
				console.log('搜索框输入值：', value);
				if (value != '') {
					let a = this.homeList.filter((i, v) => i.name.includes(value))
					console.log(a);
					this.seachList = a
				} else {

				}
			},
			getrecommendList() {
				recommendList().then(res => {
					console.log(res.data);
					this.homeList = res.data
				})
			},
			handleSearchFocus() {
				// 处理搜索框聚焦事件的逻辑
				console.log('搜索框被聚焦了');
				// 在这里执行跳转搜索页面的操作
				// this.goSearch();
			},
			// goSearch() {
			// 执行跳转搜索页面的操作
			// console.log('跳转搜索页面');
			// uni.navigateTo({
			// 	url: "/pages/home/seach"
			// })
			// },
			// getColor(id) {
			// 	console.log(id);
			// 	if (id === 1) {
			// 		return '#FDD552';
			// 	} else if (id === 2) {
			// 		return '#FDD552';
			// 	} else if (id === 3) {
			// 		return '#FDD552';
			// 	} else {
			// 		return '#FDD552';
			// 	}
			// }
		}
	}
</script>



<style scoped>
	.seach {
		padding: 20px;
	}

	.sxc_remen {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.sxc_seach_lishi {
		width: 100%;

		.sxc_list {
			display: flex;
			flex-wrap: wrap;
			/* justify-content: space-between; */
			padding: 10px;

			.sxc_lishiList {
				width: 70px;
				height: 20px;
				background-color: #FDD552;
				padding: 6px;
				border-radius: 20px;
				margin-bottom: 5px;
				text-align: center;
				margin-right: 5px;
			}
		}
	}

	li {
		list-style: none;
	}

	.sort1 {
		width: 10px;
		height: 10px;
		padding: 10px;
		line-height: 10px;
		margin-right: 20px;
		border-radius: 50px;
		display: inline-block;

	}

	.item {
		width: 10px;
		height: 10px;
		padding: 10px;
		line-height: 10px;
		margin-right: 20px;
		border-radius: 50px;
		display: inline-block;
		background-color: #FDD552;
		/* color: white; */
	}

	.sxc_tuijian_center {
		/* height: 800px; */
		padding: 0 10px;
		column-count: 2;
		column-gap: 20px;
		/* width: 100%; */

		/* overflow-y: scroll; */
		/* display: flex; */
		.sxc_tuijianList {
			width: 100%;
			/* height: 520rpx; */
			border-radius: 20rpx;
			margin-bottom: 10px;
			box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5);
			display: inline-block;

			.sxc_tuijianList_name {
				text-indent: 1px;
				margin: 10px 0;
			}
		}
	}
</style>